<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head>

<body>
    <div></div>
    <div>
        <div>
            <label for="">网站名:</label>
            <input type="text" id="webName">
        </div>
        <div>
            <label for="">网址:</label>
            <input type="text" id="webUrl">
        </div>
        <button id="add">添加</button>
    </div>
    <div>
        <div>
            <label for="">网站名:</label>
            <input type="text" id="searchInput">
        </div>
        <button id="search">搜索</button>
        <div id="searchHtml">

        </div>
    </div>

    <div id="tableHtml">
        <table border="1">
            <tr>
                <td>key</td>
                <td>value</td>
            </tr>
        </table>
    </div>
</body>
<script>
    console.log(localStorage);
    if (localStorage.length > 0) {
        for (var i = 0; i < localStorage.length; i++) {
            $('table').append(`<tr>
                <td>${localStorage.key(i)}</td>
                <td>${localStorage.getItem(localStorage.key(i))}</td>
            </tr>`)
        }
    } else {
        $('#tableHtml').html('没有数据。。。')
    }

    $('#add').click(function () {
        console.log($('#webName').val());
        console.log($('#webUrl').val());
        localStorage.setItem($('#webName').val(), $('#webUrl').val())
        alert('添加成功')
        location.reload()
    })
    // 搜索
    $('#search').click(function () {
        console.log($('#searchInput').val());
        $('#searchHtml').html(`网站名是：${$('#searchInput').val()},搜索结果是：${localStorage.getItem($('#searchInput').val())}`)
    })
</script>

</html>